<template>
  <div>
    <h1 class="title">我是父组件</h1>
    <Son>
      <!-- <template v-slot="scoped">       -->
      <!-- 作用域插槽：子组件传值给插槽使用
                  默认插槽传值
                    传：
                       <slot :属性名=“值” />
                    收：
                       <xxx>
                        <template v-slot="{属性名}">
                          属性名就可以拿到传入的值
                        </xxx>    -->
      <!-- 具名插槽传值
                     传：  <slot name="abc" :属性名=“值” />
                     收 <xxx>
                        <template #abc="{属性名}">
                          属性名就可以拿到传入的值
                        </xxx>    -->
      <template v-slot="{ xxx, num }">
        '接收数据成功:'{{ xxx }}---{{ num }}
      </template>
      <template #footer="{str}"> 我是底部内容---{{ str }} </template>
    </Son>
  </div>
</template>
<script>
import Son from './components/Son.vue'
export default {
  components: {
    Son
  }
}
</script>
<style lang="less" scoped>
// scoped:只管当前组件与子组件最外层（看得到的就管得到，子组件相当于看到最外层）
// 加了scoped同时也希望管到 ::v-deep class就可以管到子组件内部了
// ::v-deep不要乱加，管得到的不要加
// >>>  /deep/ 也可以做到::v-deep作用，但是有兼容性问题
::v-deep .box {
  width: 100px;
  height: 100px;
  background-color: rgb(0, 255, 68);
}
::v-deep .title {
  color: pink;
}
</style>
